/* --------------------------------- 
	global style
	last-update: 2015-05-26
	faeple.com
---------------------------------------*/
html{
	-webkit-font-smoothing: antialiased;
	min-height: 100%;
	height:100%;
}
body{
	font-family:"Nanum Barun Gothic","맑은 고딕","Malgun Gothic","Apple SD Gothic Neo","돋움",dotum,Arial,sans-serif;
	font-size:14px;
	line-height:1.428571429;
	color:#333;
	background-color: #eee;
	height: 100%;
}
a:focus{ outline:none; }
:focus{ outline-color: transparent; outline-style: none; }
.btn:focus{ outline: none; outline-style: none; }
select:focus,button:focus{ outline: none; outline-style: none; }
.alert{
	width:600px;
	position: fixed;
	z-index: 1300;
	left: 50%;
	margin-left:-300px;
	top: 10px;
	-webkit-transform: translateY(-120%);
	-o-transform: translateY(-120%);
	-moz-transform: translateY(-120%);
    transform: translateY(-120%);
	-webkit-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}
.alert.in{
	-webkit-transform: translateY(0);
	-o-transform: translateY(0);
	-moz-transform: translateY(0);
    transform: translateY(0);
}
@media screen and (max-width: 768px){ .alert{width:90%; left:5%; margin:0;} }
#scrollTop{position: fixed; right: 30px; bottom: -1px; border:1px solid #d6d6d6; border-top-left-radius: 4px; border-top-right-radius: 4px; width: 50px; height: 50px; cursor: pointer; text-align: center; vertical-align: center; padding-top:10px; background-color: #fff; z-index:1000; -webkit-transform: translateY(120%); -o-transform: translateY(120%); -moz-transform: translateY(120%); transform: translateY(120%); -webkit-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; }
#scrollTop.in{ -webkit-transform: translateY(0); -o-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); }
.clear{ clear: both; float: none; }
.userLink{ color: #31708f; }
.userLink:hover{ color: #1f5874; }
.share-list > li{ padding: 0; }

#viewport{ width: 100%; height: 100%; }
#page{
	position: relative;
	min-height: 100%;
	-webkit-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
#page.side{
	-webkit-transform: translateX(280px);
	-o-transform: translateX(280px);
	-moz-transform: translateX(280px);
	transform: translateX(280px);
}
#ajax-spinner{ position: fixed; top: 50%; left: 50%; width: 50px; height: 50px; background-color: #000; opacity: .75; border-radius: 20%; z-index: 2000; display: none; margin-left: -25px; margin-top: -25px; }
.open .selectpicker{ visibility:visible; opacity: 1; pointer-events: all!important;}

/*---------------------- mobile menu --------------------------------*/
.mobile-nav{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	width: 280px;
	height: auto;
	background-color: #F9F9FA;
	border-right: 1px solid #ccc;
	-webkit-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	transition: all .3s ease-out;
	-webkit-transform: translate3d(-280px, 0px, 0px);
	-o-transform: translate3d(-280px, 0px, 0px);
	-moz-transform: translate3d(-280px, 0px, 0px);
	transform: translate3d(-280px, 0px, 0px);
	overflow: hidden;
}
#mobileBackdrop{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 0;
	background-color: rgba(0,0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-transition: background-color .3s,height 0s .3s;
	transition: background-color .3s,height 0s .3s;
}
#mobileBackdrop.side_on{
	height: 100%;
	background-color: rgba(0,0,0,.7);
	-webkit-transition: background-color .3s;
	transition: background-color .3s;
}
.side_on{
	overflow-x: hidden;
	position: relative;
}
.side_on .mobile-nav{
	-webkit-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.scroll_on .mobile-nav{
	webkit-transition-duration: 0;
	transition-duration: 0;
	
} 
.mobile-nav ul > li{
	border-bottom: 1px solid #f1f1f2;
	position: relative;
}
.mobile-nav ul > li > a{
	display: block;
	font-size: 16px;
	padding: 12px 0 12px 22px;
	text-decoration: none!important;
	color: #777!important;
}
.mobile-nav > ul > li > a > .arrow{
	position: absolute;
	top: 8px;
	right: 16px;
	color: #797979;
	font-size: 20px;
}
.category-list{
	display: none;list-style: none; padding-left:16px; margin-bottom: 0;
}
.category-list .arrow{
	margin-right: 12px;
	color: #ababab;
}
#mobileSearchForm{
	width: 100%; background:#444; height: 50px; border-top: 1px solid #717171; position:fixed;top:50px;z-index:99; display:none;
}
#mobileSearchForm.open{
	display: block;
}
#mobileSearchForm div{
	position: relative;
	padding: 6px
}
#mobile-backdrop{ width:100%; background-color: rgba(0,0,0,0.55); height:100%; min-height:100%; position:fixed; z-index: 1200; top:0; left:0; right:0; bottom:0; display: none; cursor: pointer; content:" "; overflow: auto; opacity: 0; }
#mobile-backdrop.slide { opacity: 1; }
@media screen and (max-width: 768px){
	.header{ position: fixed!important; top:0; background: #444!important; }
	#page { padding-top: 50px; }
}
@media all and (min-width: 1850px){ .header{ padding: 0 65px!important; } }
/**************** 버튼용 작은사이즈 로딩이미지 **********************/
.spinner {
	height: 18px;
/* 	left: 50%; */
	margin-left: -9px;
	margin-top: -9px;
/* 	position: absolute; */
/* 	top: 50%; */
	width: 18px;
	margin: 0 auto;
	background-image: url();
	background-size: 100%;
	-webkit-animation: spin8 0.8s linear infinite;
	-moz-animation: spin8 0.8s linear infinite;
	-o-animation: spin8 0.8s linear infinite;
	animation: spin8 0.8s linear infinite;
}
.spinner.small { height: 18px; width: 18px; }
.spinner.medium { height: 25px; width: 25px; }
.spinner.large { height: 35px; width: 35px; }

/* .progress{position:relative;display:inline-block;width:5em;height:5em;margin:0 .5em;font-size:12px;text-indent:999em;overflow:hidden;-webkit-animation:spin8 .8s linear infinite;-moz-animation:spin8 .8s linear infinite;-o-animation:spin8 .8s linear infinite;animation:spin8 .8s linear infinite}.small.progress{font-size:6px}.large.progress{font-size:24px}.progress:after,.progress:before,.progress>div:after,.progress>div:before{content:'';position:absolute;top:0;left:2.25em;width:.5em;height:1.5em;border-radius:.2em;box-shadow:0 3.5em #eee;transform-origin:50% 2.5em}.progress:before{background:#555}.progress:after{transform:rotate(-45deg);background:#777}.progress>div:before{transform:rotate(-90deg);background:#999}.progress>div:after{transform:rotate(-135deg);background:#bbb} */
@-webkit-keyframes spin8{0%,12.499%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}12.5%,24.999%{-webkit-transform:rotate(225deg);-moz-transform:rotate(225deg);-o-transform:rotate(225deg);transform:rotate(225deg)}25%,37.499%{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}37.5%,49.999%{-webkit-transform:rotate(315deg);-moz-transform:rotate(315deg);-o-transform:rotate(315deg);transform:rotate(315deg)}50%,62.499%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}62.5%,74.999%{-webkit-transform:rotate(405deg);-moz-transform:rotate(405deg);-o-transform:rotate(405deg);transform:rotate(405deg)}75%,87.499%{-webkit-transform:rotate(450deg);-moz-transform:rotate(450deg);-o-transform:rotate(450deg);transform:rotate(450deg)}87.5%,99.999%{-webkit-transform:rotate(495deg);-moz-transform:rotate(495deg);-o-transform:rotate(495deg);transform:rotate(495deg)}100%{-webkit-transform:rotate(100deg);-moz-transform:rotate(100deg);-o-transform:rotate(100deg);transform:rotate(100deg)}}@-moz-keyframes spin8{0%,12.499%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}12.5%,24.999%{-webkit-transform:rotate(225deg);-moz-transform:rotate(225deg);-o-transform:rotate(225deg);transform:rotate(225deg)}25%,37.499%{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}37.5%,49.999%{-webkit-transform:rotate(315deg);-moz-transform:rotate(315deg);-o-transform:rotate(315deg);transform:rotate(315deg)}50%,62.499%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}62.5%,74.999%{-webkit-transform:rotate(405deg);-moz-transform:rotate(405deg);-o-transform:rotate(405deg);transform:rotate(405deg)}75%,87.499%{-webkit-transform:rotate(450deg);-moz-transform:rotate(450deg);-o-transform:rotate(450deg);transform:rotate(450deg)}87.5%,99.999%{-webkit-transform:rotate(495deg);-moz-transform:rotate(495deg);-o-transform:rotate(495deg);transform:rotate(495deg)}100%{-webkit-transform:rotate(100deg);-moz-transform:rotate(100deg);-o-transform:rotate(100deg);transform:rotate(100deg)}}@-o-keyframes spin8{0%,12.499%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}12.5%,24.999%{-webkit-transform:rotate(225deg);-moz-transform:rotate(225deg);-o-transform:rotate(225deg);transform:rotate(225deg)}25%,37.499%{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}37.5%,49.999%{-webkit-transform:rotate(315deg);-moz-transform:rotate(315deg);-o-transform:rotate(315deg);transform:rotate(315deg)}50%,62.499%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}62.5%,74.999%{-webkit-transform:rotate(405deg);-moz-transform:rotate(405deg);-o-transform:rotate(405deg);transform:rotate(405deg)}75%,87.499%{-webkit-transform:rotate(450deg);-moz-transform:rotate(450deg);-o-transform:rotate(450deg);transform:rotate(450deg)}87.5%,99.999%{-webkit-transform:rotate(495deg);-moz-transform:rotate(495deg);-o-transform:rotate(495deg);transform:rotate(495deg)}100%{-webkit-transform:rotate(100deg);-moz-transform:rotate(100deg);-o-transform:rotate(100deg);transform:rotate(100deg)}}@keyframes spin8{0%,12.499%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}12.5%,24.999%{-webkit-transform:rotate(225deg);-moz-transform:rotate(225deg);-o-transform:rotate(225deg);transform:rotate(225deg)}25%,37.499%{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}37.5%,49.999%{-webkit-transform:rotate(315deg);-moz-transform:rotate(315deg);-o-transform:rotate(315deg);transform:rotate(315deg)}50%,62.499%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}62.5%,74.999%{-webkit-transform:rotate(405deg);-moz-transform:rotate(405deg);-o-transform:rotate(405deg);transform:rotate(405deg)}75%,87.499%{-webkit-transform:rotate(450deg);-moz-transform:rotate(450deg);-o-transform:rotate(450deg);transform:rotate(450deg)}87.5%,99.999%{-webkit-transform:rotate(495deg);-moz-transform:rotate(495deg);-o-transform:rotate(495deg);transform:rotate(495deg)}100%{-webkit-transform:rotate(100deg);-moz-transform:rotate(100deg);-o-transform:rotate(100deg);transform:rotate(100deg)}}
/**************** 버튼용 작은사이즈 로딩이미지 **********************/